<template>
  <div class="community-detail-box">
    <scrollMore :showMoreTitle="list.length >= per_page" :load="search" :noMore="noMore">
      <div class="community-detail-content-box flex">
        <div class="community-detail-content">
          <communityTab
            :tabList="tabList"
            @change="tabChange"
            numKey="num"
            :mt="0"
          ></communityTab>
          <div class="community-detail-list-box">
            <!-- 帖子 -->
            <div class="community-detail-list" v-if="tabList[tabActive].type == 0">
              <div
                v-for="(item, index) in list"
                :key="index"
                class="community-posts-item"
              >
                <commentItem
                  :ref="setCommentItemRef"
                  :postsDetail="item"
                  :commentIndex="index"
                  @updateItem="updateItem"
                  @videoPlay="videoPlayHandler"
                  @videoEndPlay="videoEndPlayHandler"
                  :videoIsPlay="videoPlayIdx === index"
                ></commentItem>
                <comment v-show="item.showComment" :postsDetail="item"></comment>
              </div>
            </div>

            <!-- 圈子 -->
            <communityCircle
              :list="list"
              v-if="tabList[tabActive].type == 1"
            ></communityCircle>

            <!-- 用户 -->
            <communityUserInfo
              :list="list"
              v-if="tabList[tabActive].type == 2"
            ></communityUserInfo>

            <!-- 无数据展示 -->
            <div class="community-card-box" v-if="!list.length">
              <noData></noData>
            </div>
          </div>
        </div>

        <!-- 右侧 -->
        <div class="community-detail-right">
          <communityRight :user="true" :ercode="true" class="right-box"></communityRight>
        </div>
      </div>
    </scrollMore>
  </div>
</template>
<script>
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import {
  defineComponent,
  reactive,
  toRefs,
  onUnmounted,
  onMounted,
  computed,
  getCurrentInstance,
  watch,
} from "vue";
import communityRight from "../communityHome/communityRight.vue";
import comment from "@/components/comment.vue";
import commentItem from "@/components/commentItem.vue";
import communityTab from "@/components/communityTab.vue";
import communityUserInfo from "@/components/communityUserInfo.vue";
import communityCircle from "@/components/communityCircle.vue";
import { indexSearch, searchCount } from "@/axios/community.js";
import scrollMore from "@/components/scrollMore.vue";
export default defineComponent({
  components: {
    communityRight,
    comment,
    commentItem,
    scrollMore,
    communityTab,
    communityUserInfo,
    communityCircle,
  },
  setup(props, { attrs, slots, emit }) {
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    const store = useStore();

    let data = reactive({
      videoPlayIdx: "", //视频播放中的元素下标
      page: 1, //帖子分页
      list: [], //搜索结果
      tabList: [
        {
          plate_name: "动态",
          type: 0,
          numKey: "posts_count",
          num: 0, //数量
        },
        {
          plate_name: "圈子",
          type: 1,
          numKey: "circle_count",
          num: 0, //数量
        },
        {
          plate_name: "用户",
          type: 2,
          numKey: "user_count",
          num: 0, //数量
        },
      ],
      tabActive: 0, //tab选中下标
      noMore: true, //是否还有下一页
      per_page: 0, //每页的数量
    });

    let commentItemRefs = []; //帖子组件ref

    // 帖子动态添加ref
    let setCommentItemRef = (el) => {
      if (el) {
        commentItemRefs.push(el);
      }
    };

    // 帖子视频播放回调
    let videoPlayHandler = (idx) => {
      if (idx !== data.videoPlayIdx && (data.videoPlayIdx === 0 || data.videoPlayIdx)) {
        commentItemRefs[data.videoPlayIdx].videoPause();
      }
      data.videoPlayIdx = idx;
    };

    // 如果当前播放的视频停止 清空当前播放视频下标
    let videoEndPlayHandler = (idx) => {
      if (idx === data.videoPlayIdx) {
        data.videoPlayIdx = "";
      }
    };
    // 付费帖子支付成功后的回调
    let updateItem = (obj) => {
      data.list.forEach((item) => {
        if (item.id == obj.id) {
          item = Object.assign(item, obj);
          console.log(item, "支付成功回调");
        }
      });
    };

    // 搜索接口
    let search = (more) => {
      if (more) {
        data.page += 1;
      } else {
        data.page = 1;
        data.noMore = true;
      }
      indexSearch({
        keyword: data.keyword,
        type: data.tabList[data.tabActive].type,
        page: data.page,
      }).then((res) => {
        let resultData = res.data;
        data.list = [...data.list, ...resultData.data];
        data.noMore = resultData.data.length < resultData.per_page;
        data.per_page = resultData.per_page;
      });
    };

    // 获取搜索结果数量
    let getSearchCount = () => {
      searchCount({
        keyword: data.keyword,
      }).then((res) => {
        let resultData = res.data;
        data.tabList.forEach((item) => (item.num = resultData[item.numKey]));
      });
    };

    // tab切换
    let tabChange = (idx) => {
      data.tabActive = idx;
      data.list = [];
      search();
    };

    // 监听路由参数变化
    watch(
      () => router.currentRoute.value.fullPath,
      (newVal, oldVal) => {
        let path = router.currentRoute.value.path;
        if (path == "/pages/common/search") {
          getPathKeyword();
          getSearchCount(); //获取结果数量
        }
      }
    );

    // 获取路由参数并搜索
    let getPathKeyword = () => {
      data.keyword = router.currentRoute.value.query.keyword;
      search();
      getSearchCount(); //获取结果数量
    };

    onMounted(() => {
      getPathKeyword();
    });

    return {
      getSearchCount,
      search,
      updateItem,
      tabChange,
      videoPlayHandler,
      videoEndPlayHandler,
      setCommentItemRef,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
.community-detail-box {
  background: #f9f9f9;
  height: 100%;
  // height: calc(100vh - 80px);
  // padding-top: 160px;
}

.community-detail-content-box {
  max-width: 1360px;
  min-width: 1110px;
  margin: 0 auto;
  width: 80%;
  position: relative;
}

.community-card-box {
  background: #fff;
  margin-top: 10px;
  border-radius: 10px;
}

// 帖子列表
.community-detail-list {
  margin-top: 10px;
  .community-posts-item {
    background: #fff;
    margin-bottom: 10px;
    border-radius: 10px;
  }
}

.community-detail-content {
  //   flex: 1;
  width: calc(100% - 310px);
  margin-right: 10px;
  margin-top: 10px;
}

.community-detail-right {
  position: relative;
  .right-box {
    position: sticky;
    top: 10px;
  }
}
</style>
